/* 学习目标：掌握404和重定向的使用  */
import {
  BrowserRouter as Router,
  Link,
  NavLink,
  Route,
  Routes,
  // 1. 导入Navigate 重定向组件
  Navigate,
} from 'react-router-dom';
import './index.css';

import React from 'react';
import Find from './components/Find';
import Friend from './components/Friend';
import Home from './components/Home';
import My from './components/My';

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/home">点我跳转-首页</Link>
        <br />
        <NavLink to="/home">点我跳转-首页NavLink</NavLink>
        <br />
        <Link to="/find">点我跳转-发现</Link>
        <br />
        <Link to="/my">点我跳转-我的</Link>
        <br />
        <Link to="/friend">点我跳转-朋友</Link>
        <br />
        <Routes>
          {/* 2. 设置path，表示匹配到该路径时，重定向到某个路由 */}
          <Route path="/" element={<Navigate to="/home" />} />
          <Route path="/home" element={<Home />} />
          <Route path="/find" element={<Find />} />
          <Route path="/my" element={<My />} />

          {/*3. path='*' 一般用作来404页面， 可以匹配其它的任意路径 */}
          <Route path="*" element={<Friend />} />
        </Routes>
      </div>
    </Router>
  );
}
